<template>
  <el-carousel class="carousel">
    <el-carousel-item v-for="(item,index) in data" :key="index">
      <img :src="item.image" @click="toBanner(item.url)" alt>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      toBanner(url) {
        // url = url.replace('http://', '')

        if (url.indexOf('//') == -1) {
          window.open('//' + url, '_blank')
        } else {
          window.open(url, '_blank')
        }
      }
    }
  },
  components: {}
}
</script>

<style lang="scss">
.carousel {
  width: 100%;
  height: 360px;

  .el-carousel__container {
    height: 100%;
  }

  img {
    text-align: center;
    margin: 0 auto;
    width: 1920px;
    margin: 0 calc(50% - 960px);
  }
}
</style>
